<!--
 * @页面名称:
 * @描述: 左边tree数据
 * @作者: 
 * @Date:
 -->
<template>
  <div class="leftTree">
    <el-button @click="noClassManage" :class="{ active: btnStatus }"> 无分类 </el-button>
    <ztree
      class="tree"
      :setting="treeSetting.setting"
      :nodes="treeSetting.treeData"
      @onClick="onClick"
      @onCreated="handleCreated"
    >
    </ztree>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from "vue";
import Ztree from "@/components/Ztree/Ztree.vue";
import { useCatalogStore } from "@/stores/modules/catalog";
import { useDynamicStore } from "@/stores/modules/dynamic";
import { useRoute } from "vue-router";
import { ButtonStatus } from "../../components/TopBar/InitButton";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { cloneDeep } from "lodash-es";
import { getSysConfig } from "@/utils/util";

const emit = defineEmits(["onClick", "noClassManage"]);
const buttonStatus = new ButtonStatus();
const catalogStore = useCatalogStore();
const { proxy } = useCurrentInstance();
const dynamicStore = useDynamicStore();
const route = useRoute();
// 搜索条件
const searchVal = ref("");
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "Catalog_ID",
        pIdKey: "Catalog_Father"
      },
      key: {
        name: "Catalog_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [] as any[],
  ztreeObj: {} as any
});
const btnStatus = ref(false);
// 获取树数据
const getTreeData = async () => {
  if (route.query) {
    await proxy.$vueAxios
      .get(
        "MasterPermission/GetUserPermissionCatalog",
        {
          fmtId: route.query.fmtid,
          status: route.query.status
        },
        {
          noLoading: true
        }
      )
      .then((res: any) => {
        const result: any[] = [];
        res.List.filter((v: any) => v.Is_UnCatalog !== true && v.Catalog_Code !== "Recycle").forEach((item: any) => {
          result.push({ ...item, Catalog_Name: `${item.Catalog_Code} ${item.Catalog_Name}`, open: item.Catalog_Enable_Expand });
        });
        treeSetting.treeData = result;
      });
  } else {
    proxy.$message.warning("请选择全宗节点!!!");
  }
};
// 点击树节点
const onClick = (treeNode: any) => {
  btnStatus.value = false;
  emit("onClick", treeNode);
};
// 初始化树
const handleCreated = (ztreeObj: any) => {
  treeSetting.ztreeObj = ztreeObj;
};
// 无分类管理
const noClassManage = () => {
  treeSetting.ztreeObj.cancelSelectedNode();
  btnStatus.value = true;
  emit("noClassManage");
};

defineExpose({ onClick, getTreeData });
onMounted(() => {
  getTreeData();
});
</script>

<style scoped lang="scss">
.el-tabs {
  // height: 100%;
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    padding: 0;
  }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  margin-left: 4px;
  vertical-align: middle;
}
.active {
  color: var(--el-button-active-text-color);
  background-color: var(--el-button-active-bg-color);
  border-color: var(--el-button-active-border-color);
}
.leftTree {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  padding: 5px 8px;
  .tree {
    flex: 1;
  }
}
</style>
